<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

<div id="app">
    <span>{{ msg }}</span>
    <input type="text" v-model="msg"/>
    <ul>
        <li v-for="site in sites">{{site.name}}</li>
    </ul>
    <button @click="sites[0].name = 'facebook'">按钮</button>
</div>
<script>

    new Vue({
        // el: '#app',
        el: '#app',
        data: {
            msg: 'Hello World',
            message: 'Runoob!',
            sites: [
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                    ]
        },
        watch:{
            //字符串监听
            msg : function (newV,oldV) {
                console.log(newV,oldV)
            },
            // 深度监听
            sites:{
              deep:true,
              handler:function (newV,oldV) {
                console.log('sites',newV[0].name,oldV[0].name)
              },
            }
        }
    })
    // console.log(vm)

</script>

</body>
</html>
